<template>
  <div class="roles-wrapper" v-loading='loading'>
    <div class="roles-body">
      <div class="tabsBox">
        <div class="roleFn">
          <span class="roleBtn" @click='startAddNav'>新增导航</span>
        </div>
        <el-tree
          :data="navData" ref="treeList"
          :highlight-current="true"
          node-key="menuId" :default-expand-all="true"
          :props="defaultProps"
          :current-node-key="-1"
          :expand-on-click-node="false"
          @node-click="changeNav">
          <div class="custom-tree-node" slot-scope="{ data }">
            <div class="left">
              <p>{{ data.menuName }}</p>
            </div>
            <div class="right" @click.stop v-if='data.menuId > 0'>
              <el-popover placement="bottom" trigger="click"
                popper-class="popover-tree-assistance">
                <div class="assistance-cont">
                  <div class="cont" @click.stop="startEditNav(data)">
                    <p class="icon edit"></p>
                    <p class="text">编辑</p>
                  </div>
                  <div class="cont" @click.stop="delNav(data)">
                    <p class="icon del"></p>
                    <p class="text">删除</p>
                  </div>
                </div>
                <p class="text" slot="reference"></p>
              </el-popover>
            </div>
          </div>
        </el-tree>
      </div>
      <div class="rightPart">
        <section class='handle-line'>
          <type-button
            size='small'
            type='add'
            @handleClick="startAddMenu">
          </type-button>
          <span class='handle-transfer'
                @click='selectChangeBind'
               :class='{active: selectMenuIds[0]}'>
            批量移动
          </span>
        </section>
        <section class="table-wrapper">
          <el-table
            ref='menuRef'
            :data="menuData"
            height='100%'
            stripe
            @selection-change="selectionChange"
            style="width: 100%"
            row-key="menuId"
            default-expand-all
            :tree-props="{children: 'children'}">
            <el-table-column
              show-overflow-tooltip
              min-width='50'
              :selectable='canSelectable'
              type="selection">
            </el-table-column>
            <el-table-column show-overflow-tooltip
                          prop="menuName"
                          min-width='180'
                          label="菜单名称">
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              prop="ordinal"
              min-width='140'
              label="级别">
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              prop="icon"
              min-width='140'
              label="图标">
              <template slot-scope="scope">
                <div class="icon-box" v-if='scope.row.icon'>
                  <img :src="scope.row.icon" alt="">
                </div>
              </template>
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              prop="visible"
              min-width='140'
              label="显示">
              <template slot-scope="scope">
                <div class="switch-box"
                    @click='handleChangeVisible(scope.row)'>
                  <el-switch
                    :inactive-value="false"
                    :active-value="true"
                    :value="scope.row.visible">
                  </el-switch>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              width='120'>
              <template slot-scope="scope">
                <span class="handleBtn" @click="startEditMenu(scope.row)">编辑</span>
                <span class="handleBtn" @click="startDeleteMenu(scope.row)">删除</span>
              </template>
            </el-table-column>
          </el-table>
        </section>
      </div>
    </div>
    <!-- 创建/编辑 导航 -->
    <el-dialog  width="600px"
        :title="currNav.menuId ? `编辑导航` : '添加导航'"
        :visible.sync="isSettingNav"
        :close-on-click-modal="false"
        class='normal-dialog h-border'
        v-loading='isLoading'>
      <div class="main-box">
        <div class="customer-setting">
          <el-form
            :model="currNav"
            label-position="right"
            label-width="105px">
            <el-form-item
              label="导航名称："
              prop="menuName">
              <el-input
                type="text"
                class='form-input-item w340 h32'
                placeholder="请输入导航名称"
                v-model="currNav.menuName"
                maxlength="7"
                show-word-limit>
              </el-input>
            </el-form-item>
            <el-form-item
              label="导航排序："
              prop="ordinal">
              <el-input-number size="mini"  v-model="currNav.ordinal"></el-input-number>
            </el-form-item>
            <el-form-item
              label="跳转类型："
              prop="target">
              <el-radio-group
                v-model="currNav.target">
                <el-radio label="_self">内链</el-radio>
                <el-radio label="_blank">外链</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item
              label="导航路径："
              prop="path">
              <el-input
                type="text"
                class='form-input-item w340 h32'
                placeholder="若为跳转外链，请输入绝对路径，如果不跳转，请输入#"
                v-model="currNav.path"
                show-word-limit>
              </el-input>
            </el-form-item>
            <el-form-item
              label="默认打开菜单："
              prop="defaultSubMenuId">
              <span class="search-select-box" >
                <el-select v-model="currNav.defaultSubMenuId" placeholder="请选择"
                  clearable>
                  <el-option
                    v-for="item in tempMenuList"
                    :key="item.menuId"
                    :label="item.menuName"
                    :value="item.menuId">
                  </el-option>
                </el-select>
              </span>
            </el-form-item>
            <el-form-item
              label="所属平台："
              prop="platform">
              <span class="search-select-box" >
                <el-select v-model="currNav.platform" placeholder="请选择" clearable>
                  <el-option
                    v-for="item in platformOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </span>
            </el-form-item>
            <el-form-item
              label="导航图标："
              prop="icon">
              <el-input
                type="text"
                class='form-input-item w340 h32'
                placeholder="请输入图标链接"
                v-model="currNav.icon">
              </el-input>
              <div class="tubiao">
                <div class="img" :style="{backgroundImage: 'url(' + currNav.icon + ')'}">
                  <div v-show="!currNav.icon" class="iconfont">&#xe61c;</div>
                </div>
                <div>
                  <div class="wenjian">
                    <div class="up-img pointer" @click='startUploadIcon("nav", "icon")'>上传文件
                    </div>
                  </div>
                  <div class="msg">建议使用80 * 80的图片</div>
                </div>
              </div>
            </el-form-item>
            <el-form-item
              label="导航图标高亮："
              prop="activeIcon">
              <el-input
                type="text"
                class='form-input-item w340 h32'
                placeholder="请输入图标链接"
                v-model="currNav.activeIcon">
              </el-input>
              <div class="tubiao">
                <div class="img" :style="{backgroundImage: 'url(' + currNav.activeIcon + ')'}">
                  <div v-show="!currNav.activeIcon" class="iconfont">&#xe61c;</div>
                </div>
                <div>
                  <div class="wenjian">
                    <div class="up-img pointer" @click='startUploadIcon("nav", "activeIcon")'>上传文件
                    </div>
                  </div>
                  <div class="msg">建议使用80 * 80的图片</div>
                </div>
              </div>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="dialog-footer" slot='footer'>
        <el-button class='cancel-btn' @click="isSettingNav = false">取 消</el-button>
        <el-button class='confirm-btn' type="primary" @click="saveSettingNav">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 创建/编辑 菜单 -->
    <el-dialog  width="600px"
        :title="currMenu.menuId ? `编辑菜单` : '添加菜单'"
        :visible.sync="isSettingMenu"
        :close-on-click-modal="false"
        class='normal-dialog h-border'
        v-loading='isLoading'>
      <div class="main-box">
        <div class="customer-setting">
          <el-form
            :model="currMenu"
            label-position="right"
            label-width="105px">
            <el-form-item
              label="菜单名称："
              prop="menuName">
              <el-input
                type="text"
                class='form-input-item w340 h32'
                placeholder="请输入菜单名称"
                v-model="currMenu.menuName"
                maxlength="7"
                show-word-limit>
              </el-input>
            </el-form-item>
            <el-form-item
              label="菜单排序："
              prop="ordinal">
              <el-input-number size="mini"  v-model="currMenu.ordinal"></el-input-number>
            </el-form-item>
            <el-form-item
              label="跳转类型："
              prop="target">
              <el-radio-group
                v-model="currMenu.target">
                <el-radio label="_self">内链</el-radio>
                <el-radio label="_blank">外链</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item
              label="菜单路径："
              prop="path">
              <el-input
                type="text"
                class='form-input-item w340 h32'
                placeholder="若为跳转外链，请输入绝对路径，如果不跳转，请输入#"
                v-model="currMenu.path"
                show-word-limit>
              </el-input>
            </el-form-item>
            <el-form-item
              label="所属导航："
              prop="navMenuId">
              <span class="search-select-box" >
                <el-select v-model="currMenu.navMenuId" placeholder="请选择导航"
                  @change='changeCurrMenuNav'>
                  <el-option
                    v-for="item in realNavData"
                    :key="item.menuId"
                    :label="item.menuName"
                    :value="item.menuId">
                  </el-option>
                </el-select>
              </span>
            </el-form-item>
            <el-form-item
              label="上级菜单："
              prop="parentId">
              <span class="search-select-box" >
                <el-select v-model="currMenu.parentId" placeholder="请选择上级菜单"
                  clearable :disabled='currMenu.hasChildren'>
                  <el-option
                    v-for="item in tempMenuList"
                    :key="item.menuId"
                    :label="item.menuName"
                    :value="item.menuId">
                  </el-option>
                </el-select>
              </span>
            </el-form-item>
            <el-form-item
              label="菜单图标："
              prop="icon">
              <el-input
                type="text"
                class='form-input-item w340 h32'
                placeholder="请输入图标链接"
                v-model="currMenu.icon">
              </el-input>
              <div class="tubiao">
                <div class="img" :style="{backgroundImage: 'url(' + currMenu.icon + ')'}">
                  <div v-show="!currMenu.icon" class="iconfont">&#xe61c;</div>
                </div>
                <div>
                  <div class="wenjian">
                    <div class="up-img pointer" @click='startUploadIcon("menu", "icon")'>上传文件
                    </div>
                  </div>
                  <div class="msg">建议使用80 * 80的图片</div>
                </div>
              </div>
            </el-form-item>
            <el-form-item
              label="菜单图标高亮："
              prop="activeIcon">
              <el-input
                type="text"
                class='form-input-item w340 h32'
                placeholder="请输入图标链接"
                v-model="currMenu.activeIcon">
              </el-input>
              <div class="tubiao">
                <div class="img" :style="{backgroundImage: 'url(' + currMenu.activeIcon + ')'}">
                  <div v-show="!currMenu.activeIcon" class="iconfont">&#xe61c;</div>
                </div>
                <div>
                  <div class="wenjian">
                    <div class="up-img pointer" @click='startUploadIcon("menu", "activeIcon")'>上传文件
                    </div>
                  </div>
                  <div class="msg">建议使用80 * 80的图片</div>
                </div>
              </div>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="dialog-footer" slot='footer'>
        <el-button class='cancel-btn' size='small' @click="isSettingMenu = false">取 消</el-button>
        <el-button class='confirm-btn' size='small' type="primary" @click="saveSettingMenu">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 选择需要批量移动到的导航 -->
    <el-dialog  width="600px"
        title="批量移动"
        :visible.sync="isChangingNavForMenu"
        :close-on-click-modal="false"
        class='normal-dialog h-border'
        v-loading='isLoading'>
      <div class="main-box">
        <div class="customer-setting">
          <el-form
            label-position="right"
            label-width="105px">
            <el-form-item
              label="转移到导航："
              prop="">
              <span class="search-select-box " >
                <el-select v-model="toChangeNavId" placeholder="请选择导航" clearable>
                  <el-option
                    v-for="item in realNavData"
                    :key="item.menuId"
                    :label="item.menuName"
                    :value="item.menuId">
                  </el-option>
                </el-select>
              </span>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="dialog-footer" slot='footer'>
        <el-button class='cancel-btn' size='small' @click="isChangingNavForMenu = false">取 消</el-button>
        <el-button class='confirm-btn' size='small' type="primary" @click="confirmChangeNavForMenu">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 图片上传 -->
    <shardUploader ref='upload1'/>
    <input
      style='display:none;'
      type="file"
      ref='uploadRef'
      accept="image/*"
      @change='afterRead'>
  </div>
</template>
<script>
import TypeButton from '@/public/typeButton'
import searchInput from 'public/search-input'
import Drawer from '@/public/Drawer'
import shardUploader from '@/public/shardUploader'
export default {
  name: 'rolesList',
  components: {
    TypeButton,
    searchInput,
    Drawer,
    shardUploader
  },
  data () {
    return {
      loading: false,
      isLoading: false,
      navData: [],
      menuData: [],
      defaultProps: {
        children: 'children',
        label: 'menuName'
      },
      editMode: '', // 上传图片类型，属于导航还是菜单
      editField: '', // 上传图片对应字段，属于图标还是高亮图标
      currNavInfo: {}, // 当前选中的导航
      realNavData: [],
      // 创建、编辑导航相关
      currNav: {},
      isSettingNav: false,
      platformOptions: [
        { id: 'customer_console', name: '营销平台' },
        { id: 'wecom_console', name: '企微平台' },
        { id: 'admin_console', name: '运维平台' }
      ],
      // 创建、编辑菜单相关
      currMenu: {},
      isSettingMenu: false,
      tempMenuList: [], // 创建或编辑菜单时，选择了导航后，获取该导航对应的菜单列表
      // 批量移动相关
      isChangingNavForMenu: false,
      selectMenuIds: [],
      toChangeNavId: ''
    }
  },
  methods: {
    // 点击删除菜单
    startDeleteMenu (menu) {
      this.$confirm('是否删除此菜单?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        let url = `${this.SERVICE_ORG}/menu/removeMenu/${menu.menuId}`
        this.deletes(url).then(res => {
          this.loading = false
          if (res.data.code === 200) {
            this.showSucc('菜单删除成功')
            setTimeout(() => {
              this.getMenuData()
            }, 500)
          }
        })
      }).catch(() => {
      })
    },
    // 点击编辑菜单
    startEditMenu (menu) {
      this.currMenu = {
        menuId: menu.menuId,
        menuName: menu.menuName,
        ordinal: menu.ordinal,
        icon: menu.icon,
        activeIcon: menu.activeIcon,
        target: menu.target,
        path: menu.path,
        navMenuId: menu.navMenuId || '',
        parentId: menu.parentId && +menu.parentId !== -1 ? menu.parentId : '',
        hasChildren: !!(menu.children && menu.children[0])
      }
      this.tempMenuList = []
      if (menu.navMenuId) {
        this.getMenuListByNavId(menu.navMenuId)
      }
      this.isSettingMenu = true
      console.log('=== currMenu ===: ', this.currMenu)
    },
    changeCurrMenuNav () {
      this.currMenu.parentId = ''
      this.getMenuListByNavId(this.currMenu.navMenuId)
    },
    // 获取某个导航下的菜单列表
    getMenuListByNavId (navId) {
      let url = `${this.SERVICE_ORG}/menu/allMenus/${navId}`
      this.get(url).then(res => {
        if (res.data.code === 200) {
          let data = res.data.data
          if (data) {
            this.tempMenuList = data
          } else {
            this.tempMenuList = []
          }
        } else {
          this.tempMenuList = []
        }
      }).catch(e => {
        this.loading = false
        this.tempMenuList = []
        this.handleError(e)
      })
    },
    // 删除导航
    delNav (nav) {
      this.$confirm('是否删除此导航?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        let url = `${this.SERVICE_ORG}/menu/removeNavMenu/${nav.menuId}`
        this.deletes(url).then(res => {
          this.loading = false
          if (res.data.code === 200) {
            this.showSucc('导航删除成功')
            this.menuData = []
            setTimeout(() => {
              this.getNavData()
            }, 500)
          }
        })
      }).catch(() => {
      })
    },
    // 编辑导航
    startEditNav (nav) {
      this.currNav = {
        menuId: nav.menuId,
        menuName: nav.menuName,
        ordinal: nav.ordinal,
        icon: nav.icon || '',
        activeIcon: nav.activeIcon || '',
        target: nav.target,
        path: nav.path,
        defaultSubMenuId: nav.defaultSubMenuId || '',
        platform: nav.platform
      }
      this.tempMenuList = []
      this.getMenuListByNavId(nav.menuId)
      this.isSettingNav = true
    },
    // 确定批量移动菜单到另一个导航
    confirmChangeNavForMenu () {
      if (!this.toChangeNavId) {
        return this.showWarning('请先选择导航')
      }
      this.isLoading = true
      let url = `${this.SERVICE_ORG}/menu/bind/nav/menus`
      let params = {
        bindMenuIds: this.selectMenuIds,
        navMenuId: this.toChangeNavId
      }
      this.isLoading = true
      this.posts(url, params).then(res => {
        this.isLoading = false
        if (res.data.code === 200) {
          this.showSucc('批量移动成功')
          this.isChangingNavForMenu = false
          this.$refs.menuRef.clearSelection()
          this.selectMenuIds = []
          setTimeout(() => {
            this.getMenuData()
          }, 500)
        }
      }).catch(e => {
        this.isLoading = false
        this.handleError()
      })
    },
    // 点击新增菜单
    startAddMenu () {
      this.currMenu = {
        menuName: '',
        ordinal: 1,
        icon: '',
        activeIcon: '',
        target: '_self',
        path: '',
        navMenuId: this.currNavInfo.menuId || '',
        parentId: '',
        hasChildren: false
      }
      this.tempMenuList = []
      this.getMenuListByNavId(this.currNavInfo.menuId)
      this.isSettingMenu = true
    },
    // 创建或编辑菜单
    saveSettingMenu () {
      console.log('== saveSettingMenu ==: ', this.currMenu)
      if (!this.currMenu.menuName) {
        return this.showWarning('请输入菜单名称')
      }
      if (!this.currMenu.path) {
        return this.showWarning('请输入菜单路径')
      }
      if (!this.currMenu.navMenuId) {
        return this.showWarning('请选择所属导航')
      }
      // 不能选择自己作为上级菜单
      if (this.currMenu.parentId && this.currMenu.parentId === this.currMenu.menuId) {
        return this.showWarning('不能选择自身作为上级菜单')
      }
      this.isLoading = true
      let url = `${this.SERVICE_ORG}/menu/saveMenu`
      let params = {
        ...this.currMenu,
        parentId: this.currMenu.parentId || -1
      }
      this.posts(url, params).then(res => {
        this.isLoading = false
        if (res.data.code === 200) {
          this.showSucc(`菜单${this.currMenu.menuId ? '编辑' : '创建'}成功`)
          this.isSettingMenu = false
          setTimeout(() => {
            this.getMenuData()
          }, 500)
        }
      }).catch(e => {
        this.isLoading = false
        this.handleError()
      })
    },
    startAddNav () {
      this.currNav = {
        menuName: '',
        ordinal: 1,
        icon: '',
        activeIcon: '',
        target: '_self',
        path: '',
        defaultSubMenuId: '',
        platform: 'customer_console'
      }
      this.tempMenuList = []
      this.isSettingNav = true
    },
    // 创建或编辑导航
    saveSettingNav () {
      console.log('== saveSettingNav ==: ', this.currNav)
      if (!this.currNav.menuName) {
        return this.showWarning('请输入导航名称')
      }
      if (!this.currNav.path) {
        return this.showWarning('请输入导航路径')
      }
      this.isLoading = true
      let url = `${this.SERVICE_ORG}/menu/saveNavMenu`
      let params = {
        ...this.currNav
      }
      this.posts(url, params).then(res => {
        this.isLoading = false
        if (res.data.code === 200) {
          this.showSucc(`导航${this.currNav.menuId ? '编辑' : '创建'}成功`)
          this.isSettingNav = false
          setTimeout(() => {
            this.getNavData()
          }, 500)
        }
      }).catch(e => {
        this.isLoading = false
        this.handleError(e)
      })
    },
    afterRead (e) {
      let file = e.target.files[0]
      this.$refs.uploadRef.value = ''
      // 验证格式和大小不超过2M
      if (!/^image\//.test(file.type)) {
        return this.$message({
          message: '请上传图片格式文件',
          type: 'warning'
        })
      }
      if (file.size > 1024 * 1024 * 2) {
        return this.$message({
          message: '图片大小不能超过2M',
          type: 'warning'
        })
      }
      this.$refs.upload1.uploadFile(file, result => {
        switch (this.editMode) {
          case 'nav': this.currNav[this.editField] = result.url; break
          case 'menu': this.currMenu[this.editField] = result.url; break
        }
      })
    },
    startUploadIcon (mode, field) {
      this.editMode = mode
      this.editField = field
      this.$refs.uploadRef.click()
    },
    // 批量绑定导航
    selectChangeBind () {
      if (!this.selectMenuIds[0]) {
        return this.showWarning('请选择菜单')
      }
      this.isChangingNavForMenu = true
      this.toChangeNavId = ''
    },
    canSelectable (row) {
      return +row.parentId === -1
    },
    // 切换导航
    changeNav (data) {
      // 如果id < 0, 表示是导航类型，不做处理
      if (data.menuId < 0) {
        return false
      }
      this.currNavInfo = data
      this.getMenuData()
    },
    // 获取导航下菜单列表
    getMenuData () {
      // this.menuData = [
      //   {
      //     menuId: 1,
      //     menuName: '一级菜单1',
      //     ordinal: 1,
      //     visible: true,
      //     icon: 'https://test.saas.yuemia.com/roche2/storage/c9bc/a509/png/efe83fc7f064a9142ed89cc16220c2ea.png',
      //     children: [
      //       {
      //         menuId: 11,
      //         menuName: '二级菜单1',
      //         ordinal: 1,
      //         visible: true,
      //         isSub: true
      //       }
      //     ]
      //   },
      //   {
      //     menuId: 2,
      //     menuName: '一级菜单2',
      //     ordinal: 2,
      //     visible: true,
      //     children: []
      //   }
      // ]
      this.loading = true
      let url = `${this.SERVICE_ORG}/menu/allMenus/${this.currNavInfo.menuId}`
      this.get(url).then(res => {
        this.loading = false
        if (res.data.code === 200) {
          let data = res.data.data
          if (data) {
            this.menuData = data
          }
        }
      }).catch(e => {
        this.loading = false
        this.handleError(e)
      })
    },
    // 获取导航列表
    getNavData () {
      this.navData = [
        {
          menuName: '营销平台',
          menuId: '-1',
          children: []
        },
        {
          menuName: '企微平台',
          menuId: '-2',
          children: []
        },
        {
          menuName: '运维平台',
          menuId: '-3',
          children: []
        }
      ]
      let url = `${this.SERVICE_ORG}/menu/getAllSystemNavMenus`
      this.get(url).then(res => {
        if (res.data.code === 200) {
          let data = res.data.data
          this.realNavData = data || []
          // 按照导航类型进行展示
          if (data && data[0]) {
            data.forEach(item => {
              switch (item.platform) {
                case 'customer_console':
                  this.navData[0].children.push(item)
                  break
                case 'wecom_console':
                  this.navData[1].children.push(item)
                  break
                case 'admin_console':
                  this.navData[2].children.push(item)
                  break
              }
            })
            console.log('=== navData: ===: ', this.navData)
            if (this.navData[0].children[0]) {
              this.currNavInfo = this.navData[0].children[0]
              this.getMenuData()
            }
          }
        }
      }).catch(e => {
        this.handleError(e)
      })
    },
    // 改变菜单的显隐
    handleChangeVisible (menu) {
      console.log('=== visible ===: ', menu)
      this.loading = true
      let url = `${this.SERVICE_ORG}/menu/visible/${menu.menuId}`
      let config = {
        params: {
          visible: !menu.visible
        }
      }
      this.posts(url, {}, config).then(res => {
        this.loading = false
        if (res.data.code === 200) {
          this.showSucc(`操作成功`)
          setTimeout(() => {
            this.getMenuData()
          }, 500)
        }
      }).catch(e => {
        this.loading = false
        this.handleError()
      })
    },
    // 选择菜单
    selectionChange (selection) {
      this.selectMenuIds = []
      let ids = []
      selection.forEach(item => {
        ids.push(item.menuId)
        if (item.children && item.children[0]) {
          item.children.forEach(i => {
            ids.push(i.menuId)
          })
        }
      })
      this.selectMenuIds = ids
      console.log('=== this.selectMenuIds ===: ', this.selectMenuIds)
    }
  },
  created () {
    this.getNavData()
  }
}
</script>
<style lang="stylus" scoped>
.normal-dialog
  >>> .el-dialog
    margin-top 10vh !important
.roles-wrapper
  width 100%
  height 100%
  .roles-body
    display flex
    width 100%
    height 100%
    font-size 12px
    overflow-y auto
    background #f2f2f6
    padded_box(border-box, 6px)
    border-radius 6px
    .tabsBox
      min-width 180px
      padding 15px 10px
      background #fff
      border-radius 6px 0 0 6px
      border-right 2px solid #f2f2f6
      .treeBoxS >>> .el-tree-node
        margin 6px 0 !important
      .roleFn
        display flex
        padding-bottom 19px
        justify-content center
        padding-top 2px
        padding-bottom 10px
      .roleBtn
        border 1px solid #c3c3c3
        border-radius 14px
        cursor pointer
        color: #606266
        padding 5px 12px
        font-size 12px
        background #fff
        width 100%
        text-align center
        &:first-child
          margin-right 10px
      >>> .el-tree-node__expand-icon
        padding 6px
      >>> .el-tree-node__content
        height 24px !important
      >>> .el-tree-node
        margin 6px 0
    .custom-tree-node
      display flex
      justify-content space-between
      width 100%
      align-items center
      margin 5px 0
      .left
        display flex
      .right
        .text
          width 16px
          height 16px
          background url('~assets/img/more.png') no-repeat 0 0 / 100%
      img
        width 18px
        heiht 18px
      .custom-tree-node.active
        color #449EFE
        font-weight 600
      >>> .el-tree-node
        margin 10px 0
    .el-tree.roleTree
      >>>.el-tree-node__content
        height 35px
    .rightPart
      width 0
      flex 1
      border-radius 0 6px 6px 0
      background #fff
      display flex
      flex-direction column
      .handle-line
        padding 15px 0 0 20px
        flex none
        .handle-transfer
          height 30px
          line-height 30px
          width 75px
          display inline-block
          text-align center
          border 1px solid #ccc
          color #aaa
          border-radius 4px
          cursor pointer
          margin-left 6px
          &.active
            color #3496ff
            border-color #3496ff
      .table-wrapper
        padding 15px 20px
        flex 1
        height 0
        .handleBtn
          display inline
          cursor pointer
          color #3496ff
          margin-right 15px
        .icon-box
          width 18px
          height 18px
          img
            width 100%
            height 100%
.tubiao
  left1()
  margin-top 10px
  .img
    margin-right 24px
    width 80px
    height 80px
    bgI()
    background-color rgba(0, 0, 0, .1)
    box-shadow 0px 1px 6px rgba(0, 0, 0, 0.1)
    .iconfont
      line-height 80px
      text-align center
      color #ccc
  .wenjian
    display flex
    color #3496FF
    font-size 14px
  .up-img
    margin-left 20px
    position relative
    line-height 40px
    .img-sub
      position absolute
      z-index 1
      bottom 0
      left 0
      top 0
      right 0
      width 100%
      opacity 0
      -webkit-tap-highlight-color rgba(0, 0, 0, 0)
  .msg
    line-height 20px
    font-size 12px
.main-box
  padding 0 20px 0 0
  .customer-setting
    position relative
    >>>.el-form-item
      margin-bottom: 8px
    .search-select-box
      width 360px
    .require
      color #FF4D4D
      font-size 12px
      position absolute
      left -80px
    .recommendedType
      margin-top 12px
      >>>.el-radio-group .el-radio
        margin-bottom 8px
      .subtitle
        line-height 17px
        font-size: 12px
        color: #919399
    .recommendedDetail
      width 100%
      height 100%
      padding 16px
      background: #F7F8FA
      margin-top 16px
      .upperlimit
        display flex
        align-items center
        &.text
          display flex
          margin-top 16px
          align-items flex-start
        >>>.el-textarea
          width: 470px
        .addGroup
          width 64px
          height 24px
          border: 1px solid #3377FF;
          border-radius: 4px;
          font-size 12px
          color #3377FF
          line-height 24px
          text-align center
          cursor pointer
        .label
          line-height 32px
          font-size 12px
          color #14161A
          min-width 100px
          flex none
          padding-right 10px
          text-align: right
          .requireEnd
            color #FF4D4D
            font-size 12px
          .question-icon
            width 14px
            height 14px
            display inline-block
            margin-left 0px
            position: relative
            top 2px
            background url('~assets/img/icon_tip2@2x.png') no-repeat center / 14px 14px
        .el-radio-group
          position relative
          .el-radio:nth-child(2)
            margin-right 0
          .question-icon
            width 14px
            height 14px
            display inline-block
            margin-left 4px
            position absolute
            top 1px
            background url('~assets/img/icon_tip2@2x.png') no-repeat center / 14px 14px
    .serverBox
      background: #fff
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      height 40px
      justify-content center
      .acountName
        padding 6px 8px
        background: #EFF1F6
        line-height 12px
        text-align center
        border-radius: 4px
        font-size 12px
        color #5E5E66
    .setting-item
      display flex
      align-items: center
      .desc
        font-size 12px
        color: #5A5C5F;
        margin-left 4px
</style>
<style lang="stylus">
.popover-tree-assistance
  width 60px
  height 70px
  padding 4px 8px !important
  .assistance-cont
    width 100%
    height 100%
    display flex
    flex-direction column
    justify-content: space-evenly
    align-items: flex-start
    .cont
      display flex
      height 20px
      cursor pointer
      .icon
        width 14px
        height 14px
        &.edit
          background url('~assets/img/edit.png') no-repeat 0 0 / 100%
        &.del
          background url('~assets/img/del.png') no-repeat 0 0 / 100%
      .text
        color #303544
        font-size 12px
        margin-left 4px
.el-select-dropdown
  position: absolute !important
</style>
